<template>
  <Auth
    :authority="['ROLE_ADMIN', 'ROLE_EXTRACT']"
    :access="$store.state.sys.user.access"
  >
    <Card :padding="0">
      <Table :columns="columns" :data="data" width="100%">
        <template #name="{ row }">
          <Avatar icon="ios-person" :src="row.avatar" class="ivu-mr-8" />
          <strong>{{ row.name }}</strong>
        </template>
        <template #image="{ row }">
          <div class="audit-image-box" style="padding: 20px 0">
            <Image
              id="auditImage"
              @click.stop="toViewImage(row)"
              lazy
              :src="row.image"
              width="80px"
              height="80px"
            />
          </div>
        </template>
        <template #action="{ row }">
          <Button
            @click="toPickView(row)"
            shape="circle"
            size="small"
            type="success"
            class="ivu-mr-8"
            >提取日文</Button
          >
        </template>
      </Table>
      <div class="ivu-mt ivu-mb ivu-text-center">
        <Page
          :total="allExtractNum"
          show-total
          show-elevator
          @on-change="pageChange"
          @on-prev="pageChange"
          @on-next="pageChange"
        />
      </div>

      <Drawer
        :styles="drawstyles"
        title="提取日文"
        :closable="true"
        v-model="pickViewModal"
        width="60%"
      >
        <Row style="justify-content: flex-end">
          <Col
            :span="12"
            style="
              position: absolute;
              left: 0;
              overflow: auto;
              height: calc(100vh - 100px);
            "
          >
            <Image lazy :src="imageViewSrc" />
          </Col>
          <Col :span="12">
            <Form ref="formDynamic" :model="formDynamic" :label-width="60">
              <template v-for="(item, index) in formDynamic.items">
                <FormItem
                  style="width: 100%"
                  v-if="item.orderNum"
                  :key="index"
                  :label="'序号' + item.orderNum"
                  :prop="'items.' + index + '.value'"
                >
                  <Input
                    type="textarea"
                    v-model="item.original"
                    placeholder="..."
                  ></Input>
                </FormItem>
              </template>
            </Form>
          </Col>
        </Row>
        <div class="drawer-footer">
          <Button type="primary" @click="handleSubmit('formDynamic')"
            >保存</Button
          >
          <Button @click="handleReset('formDynamic')" style="margin-left: 8px"
            >重置</Button
          >
        </div>
      </Drawer>
    </Card>
    <template #noMatch>
      <Alert type="error">权限不足</Alert>
    </template>
  </Auth>
</template>

<script>
import { get, post } from "@/utils/http";
export default {
  name: "ExtractView",
  data() {
    return {
      allExtractNum: 0,
      imageViewSrc: "",
      currentPage: 1,
      pickViewModal: false,
      imageViewModalLayout: {
        width: "",
        height: "",
      },
      drawstyles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static",
      },
      formDynamic: {
        items: [
          {
            original: "",
            orderNum: 0,
            status: "",
          },
        ],
      },
      columns: [
        {
          title: "编号",
          key: "pid",
          width: 80,
        },
        {
          title: "用户名",
          slot: "name",
          width: 200,
        },

        {
          title: "序图",
          slot: "image",
        },
        {
          title: "标题",
          key: "title",
          width: 200,
        },
        {
          title: "上传时间",
          key: "time",
        },
        {
          title: "审核人",
          key: "auditUserName",
          width: 150,
        },
        {
          title: "审核时间",
          key: "auditTime",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      data: [],
    };
  },
  mounted() {
    this.getExtractList();
  },
  methods: {
    async getExtractList() {
      const res = await get(`getExtractData.php?page=${this.currentPage}`);
      if (res) {
        this.data = res.extractList;
        this.allExtractNum = res.allExtractNum;
      }
    },
    async putExtractList() {
      const res = await post(`putExtractData.php`, {
        handleUser: this.$store.state.sys.user.userId,
        data: this.formDynamic,
      });
      if (res) {
        this.getExtractList();
      }
    },
    pageChange(page) {
      this.currentPage = page;
      this.getExtractList();
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.putExtractList();
          this.$Message.success("更新成功!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleAdd() {
      this.index++;
      this.formDynamic.items.push({
        value: "",
        index: this.index,
        status: 1,
      });
    },
    handleRemove(index) {
      this.formDynamic.items[index].status = 0;
    },
    async toPickView(row) {
      this.formDynamic.pid = row.pid;
      this.pickViewModal = !this.pickViewModal;
      this.imageViewSrc = row.image;
      const auditImage = document.getElementById("auditImage");
      this.imageViewModalLayout.width = auditImage.naturalWidth + 40;
      this.imageViewModalLayout.height = auditImage.naturalHeight;

      const res = await get(`getExtractOrderList.php?pid=${row.pid}`);
      if (res) {
        this.formDynamic.items = res;
      }
    },
  },
};
</script>


<style lang="less">
.vertical-center-modal .ivu-modal {
  top: 0;
  right: 0;
  bottom: 0;
}
</style>
